<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <title>登录</title>-->

<!--    <link rel="stylesheet" href="css/common.css">-->
<!--    <link rel="stylesheet" href="css/login.css">-->
<!--</head>-->
<!--<body>-->
<!--    <div class="nav">-->
<!--        五子棋对战平台-->
<!--    </div>-->
<!--    <div class="login-container">-->
<!--        &lt;!&ndash; 登录界面的对话框 &ndash;&gt;-->
<!--        <div class="login-dialog">-->
<!--            &lt;!&ndash; 提示信息 &ndash;&gt;-->
<!--            <h3>用户登录</h3>-->
<!--            &lt;!&ndash; 这个表示一行 &ndash;&gt;-->
<!--            <div class="row">-->
<!--                <span>用户名</span>-->
<!--                <input type="text" id="username">-->
<!--            </div>-->
<!--            &lt;!&ndash; 这是另一行 &ndash;&gt;-->
<!--            <div class="row">-->
<!--                <span>密码</span>-->
<!--                <input type="password" id="password">-->
<!--            </div>-->
<!--            &lt;!&ndash; 提交按钮 &ndash;&gt;-->
<!--            <div class="row">-->
<!--                <button id="submit">提交</button>-->
<!--            </div>-->


<!--&lt;!&ndash;            <div class="row">&ndash;&gt;-->
<!--&lt;!&ndash;                <button id="submit1" >注册</button>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--        </div>-->

<!--    </div>-->

<!--    <script src="./js/jquery.min.js"></script>-->
<!--    -->
<!--    <script>-->
<!--        let usernameInput = document.querySelector('#username');-->
<!--        let passwordInput = document.querySelector('#password');-->
<!--        let submitButton = document.querySelector('#submit');-->
<!--        submitButton.onclick = function() {-->
<!--            $.ajax({-->
<!--                type: 'post',-->
<!--                url: '/login',-->
<!--                data: {-->
<!--                    username: usernameInput.value,-->
<!--                    password: passwordInput.value,-->
<!--                },-->
<!--                success: function(body) {-->
<!--                    // 请求执行成功之后的回调函数-->
<!--                    // 判定当前是否登录成功~-->
<!--                    // 如果登录成功, 服务器会返回当前的 User 对象. -->
<!--                    // 如果登录失败, 服务器会返回一个空的 User 对象. -->
<!--                    if (body && body.userId > 0) {-->
<!--                        // 登录成功-->
<!--                        alert("登录成功!");-->
<!--                        // 重定向跳转到 "游戏大厅页面".-->
<!--                        location.assign('/game_hall.html');-->
<!--                    } else {-->
<!--                        alert("登录失败，账号或密码错误!");-->
<!--                    }-->
<!--                },-->
<!--                error: function() {-->
<!--                    // 请求执行失败之后的回调函数-->
<!--                    alert("登录失败!");-->
<!--                }-->
<!--            });-->
<!--        }-->
<!--    </script>-->
<!--</body>-->
<!--</html>-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body id="body">
<div class="nav">
    <img src="image/touxiang.png" alt="">
    <span>五子棋对战平台</span>
    <!-- 空白元素, 用来占位置 -->

</div>

<div class="login-container">
    <div class="login-dialog">
        <!-- 登录界面的对话框 -->
        <h3>用户登录</h3>
        <!-- 这个表示一行 -->
        <div class="row">
            <span>用户名</span>
            <input type="text" id="username" placeholder="请输入用户名">
        </div>
        <div class="row">
            <span>密码</span>
            <input type="password" id="password" placeholder="请输入密码">
        </div>
        <!-- 提交按钮 -->
        <div class="submit-row1">
            <button id="submit">登录</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" id="submit2" value="注册" onclick="toregister()">
        </div>
    </div>
</div>

<script src="./js/jquery.min.js"></script>

<style>
    #body {
        background-image: url("image/roombeijing.png");
        background-size:100% 100%;
        background-attachment: fixed;
    }
</style>

<script type="text/javascript">
    function toregister() {
        window.location.href = "register.html";
    }
</script>
<script>

    let submitButton = document.querySelector("#submit");
    submitButton.onclick = function (){
        let usernameInput = document.querySelector("#username");
        let passwordInput = document.querySelector("#password");

        if(usernameInput.value.trim() == ""){
            alert("请输入用户名!");
            usernameInput.focus();
            return;
        }
        if(passwordInput.value.trim() == ""){
            alert('请输入密码!');
            passwordInput.focus();
            return;
        }

        $.ajax({
            type: 'post',
            url: '/login',
            data: {
                username: usernameInput.value,
                password: passwordInput.value,
            },
            success: function (body){
                //请求执行成功之后的回调函数
                //判定当前是否登录成功
                // 登录成功返回 当前的 User对象,失败返回一个空的 User 对象
                if(body && body.userId > 0){
                    // alert("登录成功!");
                    location.assign('/game_hall.html');
                }else{
                    alert("用户名或密码错误!")
                }
            },
            error: function (){
                //请求执行失败之后的回调函数
                alert("登录失败!")
            }
        });
    }
</script>

</body>
</html>


